<template>
  <div>
    <el-card style="width: 100%;height: 500px" class="box-card">
      <div slot="header" class="clearfix header">
        <div class="searchHeader">
          <span>线上热门搜素</span>

          <el-dropdown>
               <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="12">
            <LineCharts :searchCount="UCount" :title="title1" :searchList="UList"></LineCharts>
          </el-col>
          <el-col :span="12">
            <LineCharts :searchCount="CCount" :title="title2" :searchList="CList"></LineCharts>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          style="width: 100%;height: 200px"
          border
          lazy
        >
          <el-table-column
            label="排名"
            width="80px"
            type="index"
          >
          </el-table-column>
          <el-table-column
            label="搜索关键字"
            width="width"
            prop="word"
          >
          </el-table-column>
          <el-table-column
            label="用户数"
            sortable
            width="width"
            prop="user"
          >
          </el-table-column>
          <el-table-column
            label="周涨幅"
            sortable
            width="width"
            prop="count"
          >
          </el-table-column>

        </el-table>
        <el-pagination
          style="margin-top: 30px"
          align="center"
          :current-page="page"
          :page-size="limit"
          :pager-count="7"
          layout=" prev, pager, next, jumper, ->, total"
          :total=tableData.length
          @current-change="handlerCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import LineCharts from "@/views/dashboard/Observe/Search/LineCharts";
import {mapState} from "vuex";
export default {
  name: "Search",
  components: {LineCharts},
  data(){
    return{
      tableData: [],
      UCount:0,
      UList:[],
      title1:'用户搜索数',
      CCount:0,
      CList:[],
      title2:'搜索数',
      page:1,
      limit:3
    }
  },
  methods:{
    handlerCurrentChange(){
      this.$message({
        message:'分页器功能开发中！',
        type:'info'
      })
    }
  },
  computed:{
    ...mapState({
      SearchData:state => state.home.SaleData.searchWord
    }),
  },
  watch:{
    SearchData(){
      this.tableData = this.SearchData
      let UList = []
      let UCount = 0
      let CList = []
      let CCount = 0
      this.SearchData.forEach(item => {
        UCount += item.user
        UList.push(item.user)
        CCount += item.count
        CList.push(item.count)
      })
      this.UCount = UCount
      this.UList = UList
      this.CCount = CCount
      this.CList = CList
    },

  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.searchHeader {
  display: flex;
  justify-content: space-between;
}

.header {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
</style>
